import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import 'whatwg-fetch';
import { Link, routerRedux } from 'dva/router';
import { message, Modal } from 'antd';
import classNames from 'classnames';
import Loading from '../components/Loading/Loading';
import Top from '../components/Top';
import banner from '../assets/banner.png';
import styles from './Index.less';
import diamond from '../assets/diamond.png';
import member from '../assets/member.png';
import newCustomer from '../assets/newCustomer.png';
import returnCustomer from '../assets/returnCustomer.png';
import ranking from '../assets/ranking.png';
import redbag from '../assets/redbag.png';
import selfmember from '../assets/selfmember.png';
import Box from '../components/Box';
import ModalDialog from '../components/Modal';
import Shade from '../components/Shade/index';
import smileImg from '../assets/smile1.png';
function Index({ location, dispatch, users }) {
  const {
    name,
    phone,
    shopName,
    role,
    hide,
    modalVisible,
    shopNO,
    canClose,
    returnErrText,
    headImg,
    showShade,
    activitys
  } = users;
  const userModalProps = {
    name,
    phone,
    shopName,
    role,
    headImg: headImg || smileImg,
    shopNO,
    onEdit() {
      dispatch({
        type: `users/showModal`,
      });
    },
  };
  const modalProps = {
    visible: modalVisible,
    name,
    phone,
    shopName,
    role,
    hide,
    shopNO,
    canClose,
    returnErrText,
    closeModal(){
      dispatch({
        type: `users/hideModal`,
      });
    },
    update(user,resolve,reject) {
        dispatch({
          type: `users/update`,
          payload: user,
          resolve,
          reject,
        })
    },
    query(payload, resolve, reject){
      dispatch({
             type: `users/query`,
             payload,
             resolve,
             reject,
        })
    },
    vaildCode(payload, resolve, reject) {
      console.log(payload)
      dispatch({
             type: `users/getVaildCode`,
             payload,
             resolve,
             reject,
        })
    }
  }
  const boxData = {
    icon: diamond,
    title: '活动列表',
    // phone,
    // name,
    // shopNO,
    iconClass: styles.diamond,
    activitys,
    // bannerImg: ranking,
    // bannerUrl: `/ranking/index.html?phone=${phone}&name=${name}`,
    // adImg1: newCustomer,
    // adImg2: returnCustomer,
    // adUrl1: `newCustomer.html?phone=${phone}&storeNo=${shopNO}`,
    // adUrl2: `returnedCustomer.html?phone=${phone}&storeNo=${shopNO}`,
    // adUrl2: (<a href={returnedCustomer.html?phone=${phone}&storeNo=${shopNO}}><img src={adImg2} className={styles.adImg}/></a>),
    // showShade(){
    //   dispatch({
    //     type: `users/showShade`,
    //   });
    // }
  };
  const boxData2 = {
    icon: redbag,
    title: '会员活动',
    iconClass: styles.redbag,
    adImg1: member,
    adImg2: selfmember,
    phone,
    name,
    shopNO,
    adUrl1: '#',
    // adUrl2: (<Link to="/memberSelf"><img src={adImg2} className={styles.adImg} /></Link>),
  }
  const ShadeProps = {
    showShade,
    // hideShade(){
    //   dispatch({
    //     type: `users/hideShade`,
    //   });
    // }
  }
  const hundleClick = () => {
    fetch(`/firstactivity/activity/getFlagByPhone?type=3&clerkphone=${phone}`, {
      method: 'post',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      credentialss: 'same-origin',
      // body: qs.stringify(shopper),
    })
    .then((response) => {
      response.json()
      .then((datas) => {
        if (datas.status === '0') {
          const flag = datas.body.linkFlag;
           window.location.href =  `/firstactivity/entrance/jump.do?flag=${flag}`;
        } else {
          Modal.error({
            title: '获取flag失败',
            content: datas.errorMsg,
          });
        }
      }).catch((error) => {
        Modal.error({
          title: '接口访问失败',
          content: response.statusText,
        });
      })
    })
  };
  const toMemerSelf = () => {
    dispatch({
       type: `users/changeMemerSelf`,
    })
    dispatch(
      routerRedux.push({pathname: '/memberSelf'})
    )
  }
  const ModalDialogGen = () =>
  <ModalDialog {...modalProps} />;
  return (
    <div className={styles.main}>
      <Top {...userModalProps} />
      {/* <a>
        <img src={banner} className={styles.banner} />
      </a> */}
      {/*<Link to="/demo"><img src={banner} className={styles.banner} /></Link>*/}
      <Box className={styles.box} {...boxData} >
        {/*<a href={`newCustomer.html?phone=${phone}&storeNo=${shopNO}`}><img src={newCustomer} className={`${styles.adImg} ${styles.adImgLeft}`}/></a>
        <a href={`returnedCustomer.html?phone=${phone}&storeNo=${shopNO}`}><img src={returnCustomer} className={styles.adImg}/></a>*/}
      </Box>
      {/*<Box className={styles.box} {...boxData2}>
        <img src={member} className={`${styles.adImg} ${styles.adImgLeft}`} onClick={hundleClick} />
        <a onClick={toMemerSelf}><img src={selfmember} className={styles.adImg} /></a>
      </Box>*/}
      <Shade className= {styles.Shade} {...ShadeProps}/>
      <ModalDialogGen {...modalProps}/>
    </div>
  );
}

Index.propTypes = {
  users: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
};

function mapStateToProps({ users }) {
  return { users };
};


export default connect(mapStateToProps)(Index);
